---
title: ステップ
description: Starlightでタスクの番号付きリストをスタイル設定してステップバイステップのガイドを作成する方法を学びましょう。
---

import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';

タスクの番号付きリストをスタイル設定してステップバイステップのガイドを作成するには、`<Steps>`コンポーネントを使用します。

import Preview from '~/components/component-preview.astro';

<Preview>

<Steps slot="preview">

1. 新しいStarlightプロジェクトを作成します:

   <Tabs syncKey="pkg">

   <TabItem label="npm">

   ```sh
   npm create astro@latest -- --template starlight
   ```

   </TabItem>

   <TabItem label="pnpm">

   ```sh
   pnpm create astro --template starlight
   ```

   </TabItem>

   <TabItem label="Yarn">

   ```sh
   yarn create astro --template starlight
   ```

   </TabItem>

   </Tabs>

2. 最初のドキュメントページを書きます。

</Steps>

</Preview>

## インポート

```tsx
import { Steps } from '@astrojs/starlight/components';
```

## 使用方法

`<Steps>`コンポーネントを使用して、タスクの番号付きリストをスタイル設定します。
各ステップを明確に強調する必要がある、より複雑なステップバイステップガイドに役立ちます。

`<Steps>`で標準のMarkdownの順序付きリストを囲みます。
通常のMarkdown構文はすべて`<Steps>`内で適用されます。

<Preview>

````mdx
import { Steps } from '@astrojs/starlight/components';

<Steps>

1. コンポーネントをMDXファイルにインポートします:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. 順序付きリストのアイテムを`<Steps>`で囲みます。

</Steps>
````

<Fragment slot="markdoc">

````markdoc
{% steps %}

1. コンポーネントをMDXファイルにインポートします:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. 順序付きリストのアイテムを`<Steps>`で囲みます。

{% /steps %}
````

</Fragment>

<Steps slot="preview">

1. コンポーネントをMDXファイルにインポートします:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. 順序付きリストのアイテムを`<Steps>`で囲みます。

</Steps>

</Preview>

## `<Steps>` プロパティ

**実装:** [`Steps.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Steps.astro)

`<Steps>`コンポーネントはプロパティを受け付けません。
